<template>
  <div class="app-container">
    <ToggleSections :sidebar-width="sidebarWidth">
      <template #sidebar="{ isCollapsed }">
        <Sidebar :class="{ collapsed: isCollapsed }" />
      </template>
      <template #content="{ isCollapsed }">
        <main class="content">
          <router-view />
        </main>
      </template>
    </ToggleSections>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Sidebar from '@/components/layout/SideBar.vue'
import ToggleSections from '@/components/ToggleSections.vue'
import useApi from '@/core/apiStore'

const apiStore = useApi()
const sidebarWidth = ref('20%')

const checkScreenSize = () => {
  const isLargeScreen = window.innerWidth > 2000 // 假设1200px为大屏幕阈值
  sidebarWidth.value = isLargeScreen ? '10%' : '20%'
}

onMounted(() => {
  apiStore.getTables({})
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkScreenSize)
})
</script>

<style lang="scss">
@import '@/styles/main.scss';

.app-container {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.content {
  transition: width 0.3s ease;
  flex: 1 1 auto;
  padding: 1.5rem;
  min-height: 100vh;
  background: #f4f6fa;
  transition: margin-left 0.3s ease;
  overflow: hidden;
}

.collapsed {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
</style>
